import React, { useEffect, useState, useRef } from 'react';
import { Modal, Space, Button, Tabs, Form, Row, Col, Input, Table } from 'dw-mx';

import { request } from 'dw-mx-request';
import { useSewTask } from 'dw-mx-sew';

export default function ProcessPush(props) {
    const [form] = Form.useForm();
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();

    useEffect(() => {
        initTableData();
    }, []);

    const initTableData = async () => {
        const tableDataResult = await request('/mx/SEWEngine/getProcessPushData', { tid: processVars.getTid() });
        setTableData(tableDataResult.ryds);
    };

    // UI
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };

    const tailLayout = {
        wrapperCol: { offset: 6, span: 18 },
    };

    const [tableData, setTableData] = useState([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys);
        },
    };

    const columns = [
        {
            title: '人员编号',
            dataIndex: 'ryid',
        },
        {
            title: '人员编号',
            dataIndex: 'ryname',
        },
    ];

    const tabPagination = {
        pageSize: 5,
        showQuickJumper: true,
    };

    const search = async (values) => {
        const tableDataResult = await request('/mx/SEWEngine/getProcessPushData', { tid: processVars.getTid(), ryid: values.ryid });
        setTableData(tableDataResult.ryds);
    };

    return (
        <>
            <Modal title="任务推送" visible={true} onOk={() => props.pushTask(selectedRowKeys)} okText={'推送'} onCancel={() => props.revertTask(selectedRowKeys)} cancelText={'退领'} centered={true} width={'40%'}>
                <div style={{ height: 400 }}>
                    <Form form={form} {...layout} layout={'horizontal'} onFinish={search}>
                        <Row>
                            <Col span={18}>
                                <Form.Item label="人员编号" name="ryid">
                                    <Input placeholder={'请输入人员编号...'} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Row justify={'end'}>
                                    <Space>
                                        <Button type={'primary'} htmlType="submit">
                                            查询
                                        </Button>
                                    </Space>
                                </Row>
                            </Col>
                        </Row>
                    </Form>
                    <Table rowSelection={{ ...rowSelection }} rowKey={'ryid'} columns={columns} dataSource={tableData} scroll={{ x: 250, y: 300 }} pagination={tabPagination} />
                </div>
            </Modal>
        </>
    );
}
